import React, { Component } from 'react'
import { Table, Pagination } from 'antd'
import { reduce } from './course.action'
import './course.scss'

@reduce
export default class extends Component {
  constructor(props) {
    super(props)
  }
  //请求参数
  param = () => ({
    page: this.props.courseList.page,
    pageSize: this.props.courseList.pageSize
  })
  componentDidMount() {
    //初始化化表格数据
    this.props.getCourseList(this.param())
  }

  render() {
    //表格头部数据整理
    let columns = this.props.courseTableHeader.map(item => {
      if (item.key === 'category')
        return {
          ...item,
          render: val => (
            <div>
              {val}个品类
              <a href={11} className="pinlei-a">
                品类管理
              </a>
            </div>
          )
        }
      if (item.key === 'id')
        return {
          ...item,
          render: val => (
            <div className="table-caozuo">
              <a href={val}>详情</a>
              <a href={val}>修改</a>
              <a href={val}>上线</a>
              <a href={val}>删除</a>
            </div>
          )
        }
      return item
    })
    //属性
    let attr = {
      //表格
      tableAttr: {
        rowKey: 'id',
        pagination: false,
        columns,
        dataSource: this.props.courseList.list,
        onChange: (pagination, filters, sorter) =>
          this.props.getCourseList({
            ...this.param(),
            page: 1,
            sort: {
              name: sorter.columnKey,
              order: sorter.order
            }
          })
      },
      //分页
      attrPagination: {
        current: this.props.courseList.page,
        total: this.props.courseList.total,
        onChange: page => this.props.getCourseList({ ...this.param(), page })
      }
    }
    return (
      <div className="course-content">
        {/*用户列表-表格*/}
        <div className="course-table">
          <Table {...attr.tableAttr} />
        </div>
        <div className="pagination-css">
          <Pagination {...attr.attrPagination} />
        </div>
      </div>
    )
  }
}

//############
//子组件
//############
